<template>
	<view class="container">
		<view class="header">
			<text class="title">实验室</text>
		</view>
		
		<!-- 实验室预约状态 -->
		<view class="status-card">
			<view class="status-item">
				<text class="number">2</text>
				<text class="label">待完成实验</text>
			</view>
			<view class="status-item">
				<text class="number">1</text>
				<text class="label">已预约</text>
			</view>
			<view class="status-item">
				<text class="number">8</text>
				<text class="label">已完成</text>
			</view>
		</view>
		
		<!-- 实验室列表 -->
		<view class="lab-list">
			<view class="section-title">实验室预约</view>
			<view class="lab-item" v-for="(lab, index) in labList" :key="index" @click="viewLab(lab)">
				<image :src="lab.image" mode="aspectFill" class="lab-image"></image>
				<view class="lab-info">
					<text class="lab-name">{{ lab.name }}</text>
					<view class="lab-meta">
						<view class="meta-item">
							<uni-icons type="location" size="14" color="#95a5a6"></uni-icons>
							<text>{{ lab.location }}</text>
						</view>
						<view class="meta-item">
							<uni-icons type="person" size="14" color="#95a5a6"></uni-icons>
							<text>容量：{{ lab.capacity }}人</text>
						</view>
					</view>
					<view class="lab-status" :class="lab.status">
						{{ lab.statusText }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 我的实验 -->
		<view class="my-experiments">
			<view class="section-title">我的实验</view>
			<view class="experiment-item" v-for="(experiment, index) in myExperiments" :key="index" @click="viewExperiment(experiment)">
				<view class="experiment-info">
					<text class="experiment-name">{{ experiment.name }}</text>
					<text class="experiment-course">{{ experiment.course }}</text>
					<view class="experiment-time">
						<uni-icons type="calendar" size="14" color="#95a5a6"></uni-icons>
						<text>{{ experiment.time }}</text>
					</view>
				</view>
				<view class="experiment-status" :class="experiment.status">
					{{ experiment.statusText }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labList: [
					{
						id: 1,
						name: '解剖实验室A',
						location: '医学楼B201',
						capacity: 30,
						image: '/static/images/lab1.jpg',
						status: 'available',
						statusText: '可预约'
					},
					{
						id: 2,
						name: '生理实验室',
						location: '医学楼B202',
						capacity: 24,
						image: '/static/images/lab2.png',
						status: 'busy',
						statusText: '使用中' 
					},
					{
						id: 3,
						name: '显微镜实验室',
						location: '医学楼B203',
						capacity: 40,
						image: '/static/images/lab3.jpg',
						status: 'maintenance',
						statusText: '维护中'
					}
				],
				myExperiments: [
					{
						id: 1,
						name: '人体解剖实验（一）',
						course: '人体解剖学',
						time: '2024-03-20 14:00-16:00',
						status: 'upcoming',
						statusText: '待完成'
					},
					{
						id: 2,
						name: '血液检验实验',
						course: '临床检验学',
						time: '2024-03-21 10:00-12:00',
						status: 'booked',
						statusText: '已预约'
					},
					{
						id: 3,
						name: '显微镜使用实验',
						course: '组织学与胚胎学',
						time: '2024-03-19 08:00-10:00',
						status: 'completed',
						statusText: '已完成'
					}
				]
			}
		},
		methods: {
			viewLab(lab) {
				uni.navigateTo({
					url: `/pages/experiment/lab-detail?id=${lab.id}`
				});
			},
			viewExperiment(experiment) {
				uni.navigateTo({
					url: `/pages/experiment/detail?id=${experiment.id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f8f9fc;
		min-height: 100vh;
	}
	
	.header {
		margin-bottom: 30rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2c3e50;
		}
	}
	
	.status-card {
		display: flex;
		justify-content: space-around;
		background: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.status-item {
			text-align: center;
			
			.number {
				font-size: 36rpx;
				font-weight: 600;
				color: #4b7bec;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.label {
				font-size: 24rpx;
				color: #7f8c8d;
			}
		}
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #2c3e50;
		margin-bottom: 20rpx;
	}
	
	.lab-list {
		margin-bottom: 30rpx;
		
		.lab-item {
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			
			.lab-image {
				width: 100%;
				height: 300rpx;
			}
			
			.lab-info {
				padding: 20rpx;
				
				.lab-name {
					font-size: 32rpx;
					font-weight: 500;
					color: #2c3e50;
					margin-bottom: 12rpx;
					display: block;
				}
				
				.lab-meta {
					display: flex;
					margin-bottom: 12rpx;
					
					.meta-item {
						display: flex;
						align-items: center;
						margin-right: 30rpx;
						font-size: 24rpx;
						color: #95a5a6;
						
						text {
							margin-left: 8rpx;
						}
					}
				}
				
				.lab-status {
					display: inline-block;
					padding: 4rpx 16rpx;
					border-radius: 100rpx;
					font-size: 24rpx;
					
					&.available {
						color: #2ecc71;
						background: rgba(46, 204, 113, 0.1);
					}
					
					&.busy {
						color: #f1c40f;
						background: rgba(241, 196, 15, 0.1);
					}
					
					&.maintenance {
						color: #e74c3c;
						background: rgba(231, 76, 60, 0.1);
					}
				}
			}
		}
	}
	
	.my-experiments {
		.experiment-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			padding: 20rpx;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			
			.experiment-info {
				flex: 1;
				
				.experiment-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #2c3e50;
					margin-bottom: 8rpx;
					display: block;
				}
				
				.experiment-course {
					font-size: 24rpx;
					color: #7f8c8d;
					margin-bottom: 8rpx;
					display: block;
				}
				
				.experiment-time {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #95a5a6;
					
					text {
						margin-left: 8rpx;
					}
				}
			}
			
			.experiment-status {
				font-size: 24rpx;
				padding: 4rpx 16rpx;
				border-radius: 100rpx;
				
				&.upcoming {
					color: #f1c40f;
					background: rgba(241, 196, 15, 0.1);
				}
				
				&.booked {
					color: #4b7bec;
					background: rgba(75, 123, 236, 0.1);
				}
				
				&.completed {
					color: #2ecc71;
					background: rgba(46, 204, 113, 0.1);
				}
			}
		}
	}
</style> 